<template>
  <div>
    <!-- router中的函数需要执行 -->
    <button @click="$router.forward()">前进</button>
    <button @click="$router.back()">后退</button>
    <button @click="$router.go(-2)">后退2</button>
    <h1>home</h1>
    <button @click="goMusic">Music</button>
    <button @click="goPlay">Play</button>
    <button @click="goWork">Work</button>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  methods: {
    goMusic() {
      // 编程式路由跳转,在vue中使用注入到实例中的$router实例原型上的方法实现跳转
      // 控制路由间的跳转,也就是控制多个路由,所以需要使用router路由器管理
      this.$router.push('/home/music')
    },
    goPlay() {
      this.$router.push({
        // 传入值可以是字符串或者配置对象
        // path: '/home/play',

        name: 'play', // 如果路由含有name.可以使用name替代path
      })
    },
    goWork() {
      // replace 替换跳转,直接在历史记录中将当前记录替换为新跳转的路径,不能通过返回,返回到刚才的页面
      // this.$router.replace({
      this.$router.push({
        path: '/home/work',
      })
    },
  },
}
</script>

<style></style>
